<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>给我最爱的妻子啊 💕</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Microsoft YaHei', sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            overflow-x: hidden;
            position: relative;
        }

        /* 背景爱心动画 */
        .heart {
            position: absolute;
            color: rgba(255, 182, 193, 0.6);
            font-size: 20px;
            animation: float 6s ease-in-out infinite;
        }

        @keyframes float {
            0%, 100% { transform: translateY(0px) rotate(0deg); }
            50% { transform: translateY(-20px) rotate(180deg); }
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
            position: relative;
            z-index: 10;
        }

        .header {
            text-align: center;
            margin-bottom: 50px;
            animation: fadeInDown 2s ease-out;
        }

        .main-title {
            font-size: 3.5rem;
            color: #fff;
            text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
            margin-bottom: 20px;
            background: linear-gradient(45deg, #ff6b6b, #feca57, #48dbfb, #ff9ff3);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        .subtitle {
            font-size: 1.5rem;
            color: #f8f9fa;
            opacity: 0.9;
        }

        .content-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
            gap: 30px;
            margin-bottom: 50px;
        }

        .card {
            background: rgba(255, 255, 255, 0.95);
            border-radius: 20px;
            padding: 30px;
            box-shadow: 0 15px 35px rgba(0,0,0,0.1);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.2);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            animation: fadeInUp 1s ease-out;
        }

        .card:hover {
            transform: translateY(-10px);
            box-shadow: 0 25px 50px rgba(0,0,0,0.2);
        }

        .card-icon {
            font-size: 3rem;
            text-align: center;
            margin-bottom: 20px;
        }

        .card-title {
            font-size: 1.8rem;
            color: #2c3e50;
            text-align: center;
            margin-bottom: 15px;
            font-weight: bold;
        }

        .card-content {
            color: #555;
            line-height: 1.6;
            text-align: center;
        }

        .pregnancy-timeline {
            background: rgba(255, 255, 255, 0.95);
            border-radius: 20px;
            padding: 40px;
            margin: 30px 0;
            animation: fadeInLeft 1.5s ease-out;
        }

        .timeline-title {
            font-size: 2.5rem;
            color: #e74c3c;
            text-align: center;
            margin-bottom: 30px;
        }

        .timeline-item {
            display: flex;
            align-items: center;
            margin: 20px 0;
            padding: 15px;
            background: linear-gradient(45deg, #ffeaa7, #fab1a0);
            border-radius: 15px;
            animation: slideInRight 2s ease-out;
        }

        .timeline-week {
            font-size: 1.5rem;
            font-weight: bold;
            color: #2d3436;
            margin-right: 20px;
            min-width: 100px;
        }

        .timeline-desc {
            color: #2d3436;
            font-size: 1.1rem;
        }

        .love-message {
            background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 50%, #fecfef 100%);
            border-radius: 20px;
            padding: 40px;
            text-align: center;
            margin: 30px 0;
            animation: pulse 2s ease-in-out infinite;
        }

        .love-text {
            font-size: 1.8rem;
            color: #2c3e50;
            line-height: 1.8;
            font-weight: 500;
        }

        .baby-counter {
            background: rgba(255, 255, 255, 0.95);
            border-radius: 20px;
            padding: 30px;
            text-align: center;
            margin: 30px 0;
        }

        .counter-title {
            font-size: 2rem;
            color: #e74c3c;
            margin-bottom: 20px;
        }

        .counter-display {
            font-size: 3rem;
            font-weight: bold;
            color: #2c3e50;
            margin: 20px 0;
        }

        .floating-hearts {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: 1;
        }

        @keyframes fadeInDown {
            from { opacity: 0; transform: translateY(-50px); }
            to { opacity: 1; transform: translateY(0); }
        }

        @keyframes fadeInUp {
            from { opacity: 0; transform: translateY(50px); }
            to { opacity: 1; transform: translateY(0); }
        }

        @keyframes fadeInLeft {
            from { opacity: 0; transform: translateX(-50px); }
            to { opacity: 1; transform: translateX(0); }
        }

        @keyframes slideInRight {
            from { opacity: 0; transform: translateX(50px); }
            to { opacity: 1; transform: translateX(0); }
        }

        @keyframes pulse {
            0%, 100% { transform: scale(1); }
            50% { transform: scale(1.05); }
        }

        .music-note {
            position: absolute;
            font-size: 24px;
            color: rgba(255, 255, 255, 0.7);
            animation: musicFloat 4s ease-in-out infinite;
        }

        @keyframes musicFloat {
            0%, 100% { transform: translateY(0px) rotate(0deg); opacity: 0.7; }
            50% { transform: translateY(-30px) rotate(360deg); opacity: 1; }
        }

        @media (max-width: 768px) {
            .main-title { font-size: 2.5rem; }
            .content-grid { grid-template-columns: 1fr; }
            .card { padding: 20px; }
        }
    </style>
</head>
<body>
    <div class="floating-hearts"></div>
    
    <div class="container">
        <div class="header">
            <h1 class="main-title">💕 给我最爱的妻子 💕</h1>
            <p class="subtitle">感谢你给我们带来这个美好的小生命</p>
        </div>

        <div class="content-grid">
            <div class="card">
                <div class="card-icon">🤱</div>
                <h3 class="card-title">我的超级妈妈</h3>
                <p class="card-content">
                    你正在经历人生中最美好的时光，虽然有时会感到疲惫，但你的坚强和美丽每天都在感动着我。你是世界上最棒的妈妈！
                </p>
            </div>

            <div class="card">
                <div class="card-icon">👶</div>
                <h3 class="card-title">我们的小天使</h3>
                <p class="card-content">
                    我们的宝宝正在你的肚子里健康成长，每一天都在变得更加完美。我已经迫不及待想要见到这个小家伙了！
                </p>
            </div>

            <div class="card">
                <div class="card-icon">💝</div>
                <h3 class="card-title">无尽的爱意</h3>
                <p class="card-content">
                    我对你的爱每天都在增长，看着你为我们的家庭付出这么多，我的心中充满了感激和爱意。你是我生命中最珍贵的礼物。
                </p>
            </div>

            <div class="card">
                <div class="card-icon">🏠</div>
                <h3 class="card-title">温馨的家</h3>
                <p class="card-content">
                    很快我们就会有一个三口之家了！我会努力成为最好的丈夫和父亲，给你们最温暖最安全的家。
                </p>
            </div>
        </div>

        <div class="pregnancy-timeline">
            <h2 class="timeline-title">🌸 怀孕时光记录 🌸</h2>
            <div class="timeline-item">
                <div class="timeline-week">第1-12周</div>
                <div class="timeline-desc">宝宝的心脏开始跳动，你可能会有晨吐，但这都是正常的。我会一直陪在你身边。</div>
            </div>
            <div class="timeline-item">
                <div class="timeline-week">第13-27周</div>
                <div class="timeline-desc">宝宝开始踢腿了！你的肚子越来越明显，你看起来更加美丽动人。</div>
            </div>
            <div class="timeline-item">
                <div class="timeline-week">第28-40周</div>
                <div class="timeline-desc">宝宝快要出生了！我们一起准备迎接这个小天使的到来。</div>
            </div>
        </div>

        <div class="baby-counter">
            <h2 class="counter-title">🎯 距离预产期还有</h2>
            <div class="counter-display" id="countdown">计算中...</div>
            <p>每一天都是新的期待！</p>
        </div>

        <div class="love-message">
            <p class="love-text">
                "亲爱的，你是我见过最勇敢、最美丽的女人。<br>
                感谢你给我们的家庭带来这份珍贵的礼物。<br>
                我爱你，不仅仅是今天，而是永远。<br>
                我们的爱情故事将在我们的宝宝身上延续。💕"
            </p>
        </div>
    </div>

    <script>
        // 创建飘浮的爱心
        function createFloatingHearts() {
            const heartsContainer = document.querySelector('.floating-hearts');
            const hearts = ['💕', '💖', '💗', '💝', '💘', '💞'];
            
            setInterval(() => {
                const heart = document.createElement('div');
                heart.className = 'heart';
                heart.textContent = hearts[Math.floor(Math.random() * hearts.length)];
                heart.style.left = Math.random() * 100 + '%';
                heart.style.animationDuration = (Math.random() * 3 + 3) + 's';
                heart.style.fontSize = (Math.random() * 20 + 15) + 'px';
                
                heartsContainer.appendChild(heart);
                
                setTimeout(() => {
                    heart.remove();
                }, 6000);
            }, 1000);
        }

        // 创建音符动画
        function createMusicNotes() {
            const notes = ['♪', '♫', '♬', '♩', '♭', '♮'];
            
            setInterval(() => {
                const note = document.createElement('div');
                note.className = 'music-note';
                note.textContent = notes[Math.floor(Math.random() * notes.length)];
                note.style.left = Math.random() * 100 + '%';
                note.style.top = Math.random() * 100 + '%';
                note.style.animationDuration = (Math.random() * 2 + 2) + 's';
                
                document.body.appendChild(note);
                
                setTimeout(() => {
                    note.remove();
                }, 4000);
            }, 2000);
        }

        // 倒计时功能（示例：设置为3个月后）
        function updateCountdown() {
            const now = new Date();
            const dueDate = new Date(now.getTime() + (90 * 24 * 60 * 60 * 1000)); // 90天后
            
            setInterval(() => {
                const now = new Date();
                const timeLeft = dueDate - now;
                
                if (timeLeft > 0) {
                    const days = Math.floor(timeLeft / (1000 * 60 * 60 * 24));
                    const hours = Math.floor((timeLeft % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
                    
                    document.getElementById('countdown').textContent = `${days}天 ${hours}小时`;
                } else {
                    document.getElementById('countdown').textContent = '宝宝要出生啦！🎉';
                }
            }, 1000);
        }

        // 页面加载完成后启动动画
        window.addEventListener('load', () => {
            createFloatingHearts();
            createMusicNotes();
            updateCountdown();
            
            // 添加点击特效
            document.addEventListener('click', (e) => {
                const sparkle = document.createElement('div');
                sparkle.style.position = 'absolute';
                sparkle.style.left = e.clientX + 'px';
                sparkle.style.top = e.clientY + 'px';
                sparkle.style.fontSize = '20px';
                sparkle.style.color = '#ff6b6b';
                sparkle.style.pointerEvents = 'none';
                sparkle.style.zIndex = '1000';
                sparkle.textContent = '✨';
                sparkle.style.animation = 'fadeInUp 1s ease-out forwards';
                
                document.body.appendChild(sparkle);
                
                setTimeout(() => {
                    sparkle.remove();
                }, 1000);
            });
        });
    </script>
</body>
</html>